<template>
  <div>
    <div class="index">
      <div class="content">
        <div class="login">
          登录
          <el-form ref="loginForm" :model="loginForm" :rules="rules">
            <el-form-item label='用户名' prop="userName">
              <el-input v-model="loginForm.loginUserName"></el-input>
            </el-form-item>
            <el-form-item label='密码' prop="userPassword" show-password>
              <el-input v-model="loginForm.loginUserPwd"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="submit" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="line"></div> -->
        <div class="regist">
          注册
          <el-form ref="registForm" :model="registForm" :rules="rules">
            <el-form-item label='用户名' prop="userName">
              <el-input v-model="registForm.registUserName"></el-input>
            </el-form-item>
            <el-form-item label='密码' prop="userPassword" show-password>
              <el-input v-model="registForm.registUserPwd"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="submit" @click="regist">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      loginForm: {
        loginUserName: '',
        loginUserPwd: ''
      },
      registForm: {
        registUserName: '',
        registUserPwd: ''
      },
      rules: {
        userName: [
          { required: false, message: '你的用户名'},
          { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: false, message: '你的密码', trigger: 'blur' },
          {  min: 6, max: 18, message: '长度在6到18个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login () {
      this.axios.post('api/login', {
        userName: this.loginForm.loginUserName,
        userPwd: this.loginForm.loginUserPwd
      }).then((res) => {
        if (res.data.allowLogin) {
          this.$store.dispatch('actionChange', {userName: this.loginForm.loginUserName, isLogin: true})
          this.$session.set("userName", this.loginForm.loginUserName)
          this.$message({
            message: '登录成功！',
            type: 'success'
          })
          this.$router.push({ path: '/' })
          this.$router.go(0)
        } else {
          this.$message({
            message: '密码错误！',
            type: 'error'
          })
          this.loginForm.loginUserPwd = ''
        }
      })
    },
    regist () {
      this.axios.post('api/regist', {
        userName: this.registForm.registUserName,
        userPwd: this.registForm.registUserPwd
      }).then((res) => {
        if (res.data.allowRegist) {
          this.$store.dispatch('actionChange', {userName: this.registForm.registUserName, isLogin: true})
          this.$session.set("userName", this.registForm.registUserName)
          this.$message({
            message: '注册成功！' + this.registForm.registUserName,
            type: 'success'
          })
          this.$router.push({ path: '/' })
          this.$router.go(0)
        }
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
  .index
    min-height 37.5rem
    background-color rgba(222, 222, 222, .8)
    padding 2rem
    .content
      display flex
      justify-content space-around
      flex-wrap wrap
      .login
        width 40%
        min-width 240px
        font-weight bold
        font-size 2rem
        .submit
          width 100%
      .regist
        width 40%
        min-width 240px
        font-weight bold
        font-size 2rem
        .submit
          width 100%
      .line
        background-color #ddd
        height 100%
        width 0.06rem
</style>
